<template>
	<view>
		<view class="coupon">
			<view>优惠形式</view>
			<view>减满券</view>
		</view>
		<view class="coupon-cen">
			<view class="coupon-cen-con">
				<view>优惠券名称</view>
				<input type="text" value="" placeholder="最多10个字，例：洗剪吹优惠券" maxlength="10" />
			</view>
			<view class="coupon-cen-con">
				<view>门槛金额</view>
				<input type="text" value="" placeholder="1-100000" />
			</view>
			<view class="coupon-cen-con">
				<view>立减金额</view>
				<input type="text" value="" placeholder="1-100000" />
			</view>
			<view class="coupon-cen-con">
				<view>发放数量</view>
				<input type="text" value="" placeholder="1-100000000" />
			</view>
		</view>
		<view class="coupon-cen cen">
			<view class="coupon-cen-con">
				<view>有效期类型</view>
				<view class="cen-left">领券当日开始计算有效期</view>
			</view>
			<view class="coupon-cen-con">
				<view>有效期天数</view>
				<input type="text" value="" placeholder="有效期最多支持365天" />
			</view>
		</view>
		<view class="cen-con">
			<view class="cen-con-wan">
				<view class="cen-text1">每人限领</view>
				<view style="display: flex;align-items: center;">
					<view class="cen-text1">不限张</view>
					<u-icon name="arrow-right" color="#000" size="30"></u-icon>
				</view>
			</view>
			<view class="cen-con-wan">
				<view class="cen-text1">适用服务</view>
				<view style="display: flex;align-items: center;">
					<view class="cen-text1">全部服务</view>
					<u-icon name="arrow-right" color="#000" size="30"></u-icon>
				</view>
			</view>
		</view>
		<view class="input">
			<view>使用说明</view>
			<u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight" placeholder="填写使用详情描述，最多50字（选填）" maxlength="50"/>
		</view>
		<view class="bottom">
			<view>保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'textarea',
				border: false,
				height: 100,
				autoHeight: true,
			}
		}
	}
</script>

<style lang="scss">
	.bottom{
		padding:37rpx 24rpx;
		
		view{
			width: 100%;
			height: 85rpx;
			line-height: 85rpx;		
			background: #00C6C2;		
			font-size: 36rpx;
			font-family: PingFang;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}
	}
	.coupon {
		padding: 30rpx 25rpx;
		border-bottom: 10rpx solid #F4F4F4;
		display: flex;
		align-items: center;


		view {

			margin-right: 70rpx;
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #000000;
		}
	}

	.coupon-cen {
		padding: 0 25rpx;
		border-bottom: 10rpx solid #F4F4F5;

		.coupon-cen-con {
			padding: 35rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 1rpx solid #F4F4F4;

			.cen-left {
				width: 70%;
				margin-left: 60rpx;
			}

			view {
				width: 25%;
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #000000;
			}

			input {
				width: 70%;
				padding-left: 35rpx;
				height: 100%;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;

			}
		}
	}

	.cen-con {
		padding: 0 25rpx;
		border-bottom: 10rpx solid #F4F4F5;

		.cen-con-wan {
			padding: 30rpx 0;
			border-bottom: 1rpx solid #F4F4F5;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.cen-text1 {
				font-size: 32rpx;
				font-family: PingFang;
				font-weight: 500;
				color: #000000;
			}

		}
	}
	.input{
		padding: 25rpx;
		border-bottom: 10rpx solid #F4F4F5;
		
		view{
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #000000;
		}
	}
</style>
